import React, {Component} from 'react';
//import pureRender from 'pure-render-decorator';
import {History, Link } from 'react-router';
import { connect } from 'react-redux';
import { IssuingGet } from '../Redux/Actions/issuingAction';
import { BankGet } from '../Redux/Actions/bankAction';
import { is, fromJS} from 'immutable';
import {UctToLocaltime} from '../Config/Util';
import {Imglist} from './common/img';

class Orderdetail extends Component {
    constructor() {
        super();
        this.state = {
            
        }
    }

    componentWillMount(){
        const token = this.props.authReducer.user.data.token;
        const orderId = this.props.location.state.orderId;
        this.props.dispatch(IssuingGet(token,orderId));
    }

    shouldComponentUpdate(nextProps, nextState) {
        return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state),fromJS(nextState))
    }

    componentDidMount(){
        const token = this.props.authReducer.user.data.token;
        const bankId = this.props.issuingReducer.issuing.bankId;
        this.props.dispatch(BankGet(token,bankId));
    }
   
    render() {
        document.title="新增订单";
        const issuing = this.props.issuingReducer.issuing.data;
        const bank = this.props.issuingReducer.issuing.data;
        const invoice = this.props.location.state.invoice==undefined?{remainInvoice:0,latestMakeInvoiceTimeOfThisMonth:null,latestMakeInvoiceTimeOfNextMonth:null}:this.props.location.state.invoice;
        if(issuing != undefined && invoice != undefined){
            return (
                <div className="main-wrap bg-grey">
                    <div className="detail-title">
                        <h3>{issuing.orderId}</h3>
                        <p>{issuing.carFrameNo}/{issuing.carType}</p>
                    </div>
                    <ul className="detail-list">
                        <li>
                            <Link to={{pathname:"/issuing",state:{issuing:issuing,bank:bank}}}>
                                <p className="icon iconfont icon-kaizheng"></p>
                                开证
                            </Link>
                        </li>
                        <li>
                            <Link to={{pathname:"/transport",state:{orderId:this.props.location.state.orderId}}}>
                                <p className="icon iconfont icon-yunshu"></p>
                                运输
                            </Link>
                        </li>
                        <li>
                            <Link to={{pathname:"/clearance",state:{orderId:this.props.location.state.orderId}}}>
                                <p className="icon iconfont icon-baoguan"></p>
                                报关
                            </Link>
                        </li>
                        <li>
                            <Link to={{pathname:"cost",state:{orderId:this.props.location.state.orderId}}}>
                                <p className="icon iconfont icon-chengben"></p>
                                成本
                            </Link>
                        </li>
                    </ul>
                    <div className="me-info">
                        <ul className="infoList">
                            <li>
                                <span>本月剩余发票</span> <span>{invoice.remainInvoice}</span>
                            </li>
                            <li>
                                <span>本月最迟开票日</span> <span>{UctToLocaltime(invoice.latestMakeInvoiceTimeOfThisMonth)}</span>
                            </li>
                            <li>
                                <span>下月最早开票日</span> <span>{UctToLocaltime(invoice.latestMakeInvoiceTimeOfNextMonth)}</span>
                            </li>
                            <li>
                                <span>发动机号</span> <span>{issuing.engineNo}</span>
                            </li>
                            <li>
                                <span>车辆颜色</span> <span>{issuing.carColor}</span>
                            </li>
                            <li>
                                <span>排量</span> <span>{issuing.deliveryCapacity}</span>
                            </li>
                            <li>
                                <span>座位数</span> <span>{issuing.seatNo}</span>
                            </li>
                            <li>
                                <span>用油类型</span> <span>{issuing.oilType==="gasoline"?"汽油":"柴油"}</span>
                            </li>
                            <li>
                                <span>轮胎尺寸</span> <span>{issuing.tireSize}</span>
                            </li>
                        </ul>
                        <p className="info-title">车辆手续<span className="icon iconfont icon-xiala pull-right"></span></p>
                        <ul className="infoList">
                            <Imglist src={issuing.shutBillUrl} alt="关单照片"/>
                            <Imglist src={issuing.commodityUrl} alt="商检照片"/>
                            <Imglist src={issuing.uniformityUrl} alt="一致性"/>
                            <Imglist src={issuing.electronicInfoUrl} alt="电子信息单"/>
                            <Imglist src={issuing.carInvoiceUrl} alt="车辆发票"/>
                            <Imglist src={issuing.purchaseTaxUrl} alt="置购稅申请表"/>
                        </ul>

                        <p className="info-title">开票<span className="icon iconfont icon-xiala pull-right"></span></p>
                        <ul className="infoList">
                            <li>
                                <span>预约开票日期</span> <span>{UctToLocaltime(issuing.appointmentMakeInvoiceTime)}</span>
                            </li>
                            <Imglist src={issuing.InvoiceInfoUrl} alt="开票信息"/>
                        </ul>
                    </div>
                </div>
            )
        }else{
            return <div></div>
        }
    }
}


export default connect((state) => {
    const { authReducer,issuingReducer,bankReducer } = state;
    return {
        authReducer,issuingReducer,bankReducer
    }
})(Orderdetail);